{include file="public/header,public/nav,public/fixbar" title="考试详情-<?php echo request()->pc_info['seo_title']?>"/}
<div class="layui-body">
    <div class="layui-container">
        <div class="layui-main">
            <div class="layui-padding-4">
                <div class="layui-row">
                    <div class="text-align-center">
                        <h2 class="margin-bottom-20">{$info.name}</h2>
                        {if $info.practice}
                        <div class="justify-content-center layui-font-16">
                            <span class="text">
                                题目数量：{$info.question_num ?? '--'}
                            </span>
                            <span lay-separator="" style="margin: 0px 20px;color:#ddd;">|</span>
                            <span class="text">
                                模考分数：{$info.total_score ?? '--'}
                            </span>
                            <span lay-separator="" style="margin: 0px 20px;color:#ddd;">|</span>
                            <span class="text">
                                考试时间： {if $info.set.exam_time_type == 0} 不限时间 {else} {$info.set.exam_start_time} ~ {$info.set.exam_end_time} {/if}
                            </span>
                            <span lay-separator="" style="margin: 0px 20px;color:#ddd;">|</span>
                            <span class="text">
                                答卷时长：{if $info.set.answer_time == 0} 不限时间 {else} {$info.set.answer_time} 分钟 {/if}
                            </span>
                        </div>
                        {/if}
                    </div>
                    <hr style="margin: 48px 0px;">
                    <div class="item">
                        {if $info.practice}
                        <div class="cover-content-item">
                            <p class="margin-bottom-30 align-items-center">
                                <b class="margin-right-10">本次练习成绩</b>
                                {if $info.practice.status != 0}
                                    {if $info.practice.status == 3}
                                        <span class="layui-btn layui-bg-success layui-btn-xs">已批阅</span>
                                    {else}
                                        <span class="layui-btn layui-bg-red layui-btn-xs">未批阅</span>
                                    {/if}
                                {/if}
                            </p>
                            <div class="layui-col-space20 align-items-center">
                                <div class="layui-col-xs12 layui-col-sm12 layui-col-md6">
                                    <div id="echarts-grade" style="height:200px;"></div>
                                </div>
                                <div class="layui-col-xs12 layui-col-sm12 layui-col-md6 padding-right-30">
                                    {if $info.practice.status != 0}
                                    <div class="infor-item space-between layui-font-16">
                                        <span class="text">正确率： </span>
                                        <b>{$info.practice.correct_rate ?? 0}%</b>
                                    </div>
                                    {else}
                                    <div class="infor-item space-between layui-font-16">
                                        <span class="text">答题进度： </span>
                                        <b>{$info.done_practice_count ?? 0} / {$info.practice.total_question ?? 0}</b>
                                    </div>
                                    {/if}
                                    <div class="infor-item space-between layui-font-16">
                                        <span class="text">答题用时：</span>
                                        <b class="letter-spacing-1">{$info.practice.show_time ?? '--'}</b>
                                    </div>
                                    {if $info.practice.status != 0}
                                    <div class="infor-item space-between layui-font-16">
                                        <span class="text">考试排名： </span>
                                        <b>
                                            {if $info.practice.current_rank > 0}
                                                第 {$info.practice.current_rank} 名
                                            {else}
                                                未上排行榜
                                            {/if}
                                        </b>
                                    </div>
                                    {/if}
                                </div>
                            </div>
                        </div>
                        {else}
                        <div class="cover-content-item justify-content-center">
                            <div class="layui-col-xs12 layui-col-md7">
                                <div class="infor-item space-between layui-font-16">
                                    <span class="text item"><img class="margin-right-8" src="/static/images/rank/icon_time.png">答卷时长： </span>
                                    <span class="layui-font-success">{if $info.set.answer_time == 0} 不限时间 {else} {$info.set.answer_time} 分钟 {/if}</span>
                                </div>
                                <div class="infor-item space-between layui-font-16">
                                    <span class="text item"><img class="margin-right-8" src="/static/images/rank/icon_score.png">模考分数： </span>
                                    <span class="layui-font-success">{$info.total_score ?? '--'} 分</span>
                                </div>
                                <div class="infor-item space-between layui-font-16">
                                    <span class="text item"><img class="margin-right-8" src="/static/images/rank/icon_question.png">题目数量：</span>
                                    <span class="layui-font-success">{$info.question_num ?? '--'} 题</span>
                                </div>
                            </div>
                        </div>
                        {/if}
                        <div class="cover-content-item text-align-center" style="padding-left: 20px;">
                            <div class="text">
                                <p class="layui-font-16 margin-bottom-15">
                                    可考试次数：{if $info.set.exam_num == 0} 不限制 {else} {$info.set.exam_num}次 {/if}
                                </p>
                                <span class="layui-font-14">按照考试练习的最高分数计入排行榜</span>
                            </div>
                            <div style="width: 300px;margin: 0 auto;margin-top: 60px;">
                                <div class="margin-bottom-25">
                                    {if $info.set.status == 1}
                                        <a href="javascript:;" data-id="{$info.id}" class="layui-btn layui-bg-success layui-btn-xl layui-btn-fluid go-practice">
                                            {if $info.practice}
                                                {if $info.practice.status == 0}
                                                    继续练习
                                                {else}
                                                    再练一次
                                                {/if}
                                            {else}
                                                开始练习
                                            {/if}
                                        </a>
                                    {else}
                                        <a class="layui-btn layui-btn-disabled layui-btn-xl layui-btn-fluid">
                                            {if $info.set.status == 0}考试未开始{else}考试已结束{/if}
                                        </a>
                                    {/if}
                                </div>
                                <div>
                                    <a href="/exam/practice_rank?product_id={$info.id}" class="layui-btn layui-btn-primary layui-border-success layui-btn-xl layui-btn-fluid">考试排行榜</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-row" style="margin-top: 100px;">
                    <p class="margin-bottom-10"><b>考试说明</b></p>
                    <p class="text margin-bottom-5">
                        重考间隔：{if $info.set.retake_interval == 0} 不限制 {else} {$info.set.retake_interval}分钟 {/if}
                        <span lay-separator="" style="margin: 0px 20px;color:#ddd;">|</span>
                        重考限制：{if $info.set.retake_limit == 1} 批阅后可重考 {else} 未批阅可重考 {/if}
                    </p>
                    <p class="text">考试过程中有任何疑问可咨询客服。排名将在交卷后自动更新。并列分数排名以交卷时间先后为准。</p>
                </div>
            </div>
        </div>
    </div>
</div>
{include file="public/footer"/}
<script type="text/javascript">
    layui.use(['layer','echarts'], function(){
        var layer = layui.layer, $ = layui.$, echarts = layui.echarts;

        var product_id = "{$info.id}";
        var status = "{$info.practice.status ?? 0}";
        $(function(){
            practice_grade(product_id);
        })

        // 获取考试成绩
        function practice_grade(product_id){
            var loading = layer.msg('数据加载中..', {icon: 16,shade: 0.3,time: false});
            $.ajax({
                url:"/exam/practice_detail",
                type:'post',
                data:{"product_id":product_id},
                dataType:'JSON',
                headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                success:function(res){
                    layer.close(loading);
                    if(res.code==0){
                        echarts_grade(res.data, res.name);
                    }else{
                        layer.msg(res.msg,{icon: 2,time: 2000});
                    }
                },
                error:function(e){
                    layer.msg('请求失败'+e.responseText,{icon: 2});
                },
            });
        }

        // 成绩图表
        function echarts_grade(grade, name) {
            var echarts_option = echarts.init(document.getElementById('echarts-grade'), 'walden');
            var flg = '分';
            if (status == 0) {
                flg = '%';
            }
            var option = {
                series: [{
                    name: "Indicator",
                    type: "gauge",
                    radius: '100%',
                    startAngle: 90,
                    endAngle: -270,
                    axisLine: {
                        lineStyle: {
                            width: 30,
                            color: [[1, '#f7f7f7']]
                        }
                    },
                    progress: {
                        show: true,
                        width: 30,
                        itemStyle: {
                            color: '#16b777'
                        }
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLabel: {
                        show: false,
                    },
                    splitLine: {
                        show: false,
                    },
                    pointer: {
                        show: false,
                    },
                    detail: {
                        offsetCenter: [0, '-12%'],
                        fontSize: 32,
                        fontWeight: 'bold',
                        formatter: "{value}"+flg,
                        color: '#16b777'
                    },
                    data: [
                        {value: grade, name: name}
                    ]
                }]
            };
            echarts_option.setOption(option);
            // echarts 窗口缩放自适应
            window.onresize = function () {
                echarts_option.resize();
            }  
        }
        
        // 验证是否满足练习条件
        $(".go-practice").click(function(){
            var id = $(this).data('id');
            $(this).prepend('<i class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop layui-font-26"></i>');
            $.ajax({
                url:'/exam/verify_is_practice',
                type:'post',
                data:{"product_id":id},
                dataType:"JSON",
                headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                success:function(res){
                    $('.go-practice').find('i').remove();
                    if(res.code == 0){
                        location.href="/exam/practice?product_id="+id;
                    } else{
                        layer.msg(res.msg,{icon: 2});
                    }
                },
                error:function(e){
                    layer.msg('请求失败'+e.responseText,{icon: 2});
                },
                
            });            
        })
    });
</script>